<template>
  <!-- header2 -->
  <div class="header">
    <div class="center">
      <div class="left">
        <div class="left-box">
          <router-link to="/" class="logo-box">
            <img class="logo" src="../../../public/logo/deep_icon_logo.png" alt />
            <span class="logo-text">DeepCoin</span>
          </router-link>
          <div class="link-icon">
            <i class="set iconfont icon-mulu"></i>
            <ul class="nav-list">
              <li>
                <router-link to="/">
                  <i class="iconfont icon-kuangchi"></i>矿池
                </router-link>
              </li>
              <li>
                <router-link to="/">
                  <i class="iconfont icon-qianbao"></i>钱包
                </router-link>
              </li>
              <li>
                <router-link to="/">
                  <i class="iconfont icon-bi"></i>DeepCoin
                </router-link>
              </li>
              <li>
                <router-link to="/">
                  <i class="iconfont icon-hehuoren"></i>合伙人
                </router-link>
              </li>
              <li>
                <router-link to="/">
                  <i class="iconfont icon-touziren"></i>专业投资人
                </router-link>
              </li>
              <li>
                <router-link to="/">
                  <i class="iconfont icon-project_before_setup_active"></i>项目披露区
                </router-link>
              </li>
              <li>
                <router-link to="/">
                  <i class="iconfont icon-kaifangpingtai"></i>开放平台
                </router-link>
              </li>
              <div class="division_line"></div>
              <li>
                <router-link to="/">
                  <i class="iconfont icon-safety"></i>安全
                </router-link>
              </li>
              <li>
                <router-link to="/">
                  <i class="iconfont icon-wentifankui"></i>问题反馈
                </router-link>
              </li>
              <li>
                <router-link to="/">
                  <i class="iconfont icon-API"></i>API接入
                </router-link>
              </li>
            </ul>
          </div>
        </div>
        <ul class="nav-box">
          <li>
            <router-link to="/market">行情图表</router-link>
          </li>
          <li>
            <router-link to="/otc">法币交易</router-link>
          </li>
          <li>
            <router-link to>币币交易</router-link>
            <i class="iconfont icon-jiantou"></i>
            <div class="nav-list">
              <router-link to="/trade">
                <span class="nav-bar">币币交易</span>
              </router-link>
              <router-link to="/">
                <span class="nav-bar">杠杆交易</span>
              </router-link>
            </div>
          </li>
          <li>
            <router-link to>合约交易</router-link>
            <i class="iconfont icon-jiantou"></i>
            <div class="nav-list">
              <router-link to="/">
                <span class="nav-bar">永续合约</span>
              </router-link>
              <router-link to="/">
                <span class="nav-bar">交割合约</span>
              </router-link>
            </div>
          </li>
        </ul>
      </div>

      <div class="user-box">
        <el-dropdown>
            <span class="right-text cursor asset-drop">
              资产
              <i data-v-51a1b09a class="el-icon-caret-bottom language-icon"></i>
            </span>
            <el-dropdown-menu slot="dropdown" class="dropdown-menu">
              <router-link to="/user/asset">
                <el-dropdown-item class="dropdown-text">我的资产</el-dropdown-item>
              </router-link>
              <router-link to="/user/asset/otc">
                <el-dropdown-item class="dropdown-text">法币账户</el-dropdown-item>
              </router-link>
              <router-link to="/user/asset/cec">
                <el-dropdown-item class="dropdown-text">币币账户</el-dropdown-item>
              </router-link>
            </el-dropdown-menu>
          </el-dropdown>
        <div class="no-login" v-if="true">
          <router-link to="/login" class="login">登录</router-link>

          <router-link to="/regist" class="regist">注册</router-link>
        </div>
        <div class="login-box" v-else>
          <div class="icon-list">
            <span class="nav-bar">
              资产管理
              <i class="iconfont icon-jiantou"></i>
            </span>
            <div class="nav-box">
              <router-link to>
                <p>我的资产</p>
              </router-link>
              <router-link to>
                <p>充币</p>
              </router-link>
              <router-link to>
                <p>提币</p>
              </router-link>
              <router-link to>
                <p>资金划转</p>
              </router-link>
            </div>
          </div>
          <div class="icon-list">
            <span class="nav-bar">
              176***4251
              <i class="iconfont icon-jiantou"></i>
            </span>
            <div class="nav-box">
              <router-link to>
                <p>账户和安全</p>
              </router-link>
              <router-link to>
                <p>身份认证</p>
              </router-link>
              <router-link to>
                <p>手续费等级</p>
              </router-link>
            </div>
          </div>
        </div>
        <div class="other-wrap">
          <div class="icon-list">
            <i class="iconfont icon-lianxi"></i>
            <div class="nav-box">
              <p>
                <i class="iconfont icon-Facebook"></i>FaceBook
              </p>
              <p>
                <i class="iconfont icon-ttww"></i>Twitter
              </p>
              <p>
                <i class="iconfont icon-weixin"></i>微信
              </p>
              <p>
                <i class="iconfont icon-qq"></i>QQ
              </p>
            </div>
          </div>
          <div class="icon-list">
            <i class="iconfont icon-ziyuan"></i>
            <div class="nav-box">
              <p>
                <i class="iconfont icon-nsiconrmb"></i>CNY
              </p>
              <p>
                <i class="iconfont icon-meiyuan"></i>USD
              </p>
              <p>
                <i class="iconfont icon-zhifu_huobi_yingbang_"></i>GBP
              </p>
            </div>
          </div>
          <div class="icon-list">
            <i class="iconfont icon-bianji_wenben_yuyanqiehuan"></i>
            <div class="nav-box">
              <p>
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#iconguoqi" />
                </svg>简体中文
              </p>
              <p>
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#iconuk" />
                </svg>English
              </p>
              <p>
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#iconfaguo" />
                </svg>русский язык
              </p>
              <p>
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icondeguo" />
                </svg>Français
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import "../../../public/js/iconfont.js";
export default {
  data() {
    return {};
  },

  methods: {},

  computed: {},

  created() {},

  mounted() {}
};
</script>
<style lang="less" scoped>
.b {
  border: solid 1px red;
}
.header {
  width: 100%;

  background-image: linear-gradient(90deg, #041636, #0b2758);
  box-shadow: inset 0 -1px 0 0 hsla(0, 0%, 100%, 0.05);
  .center {
    padding: 0px 24px;
    width: 100%;
    margin: 0 auto;
    height: 48px;
    display: flex;
    justify-content: space-between;
    .left {
      display: flex;
      .left-box {
        display: flex;
        color: #fff;
        .logo-box {
          display: flex;
          align-items: center;
          .logo {
            width: 35px;
            height: 35px;
          }
          .logo-text {
            font-size: 25px;
            font-weight: bold;
            margin: 0 5px;
            color: rgb(240, 236, 236);
          }
        }
        .link-icon {
          position: relative;
          .set {
            font-size: 20px;
            color: #768093;
            margin-left: 15px;
            position: relative;
            top: -1px;
            cursor: pointer;
            line-height: 48px;
          }
          .nav-list {
            position: absolute;
            top: 40px;
            left: 15px;
            background-color: #fff;
            border-radius: 4px;
            overflow: hidden;
            color: #333;
            white-space: nowrap;
            z-index: 2019;
            height: 0px;
            transition: all 0.3s;
            li {
              line-height: 36px;
              font-size: 14px;
              .iconfont {
                color: #5a83dd;
                margin-right: 10px;
              }
              a {
                padding: 0px 15px;
                display: inline-block;
                width: 100%;
              }
            }
            .division_line {
              height: 1px;
              background-color: #e8e9eb;
              margin: 5px 0;
            }
            li:hover {
              background-color: rgba(48, 117, 238, 0.05);
            }
          }
        }
        .link-icon:hover .nav-list {
          height: 381px;
        }
      }
      .nav-box {
        display: flex;
        align-items: center;
        // margin-left: 110px;
        li {
          padding: 0 16px;
          position: relative;
          top: 0;
          left: 0;
        }
        li a {
          font-size: 14px;
          font-weight: 400;
          color: #a8afbc;
          line-height: 48px;
          display: inline-block;
        }
        li:hover a {
          color: #fff;
        }
        li:hover i {
          transform: rotate(180deg);
          color: #fff;
        }
        li:hover .nav-list {
          height: auto;
        }
        .iconfont {
          color: #a8afbc;
          font-size: 18px;
          display: inline-block;
          transition: all 0.3s;
          position: relative;
          top: 1.5px;
        }
        // 二级导航
        .nav-list {
          position: absolute;
          top: 45px;
          left: 5px;
          background-color: #fff;
          border-radius: 4px;
          overflow: hidden;
          z-index: 2019;
          transition: all 0.3s;
          height: 0px;
          a {
            line-height: 38px;
            width: 100%;
          }
          .nav-bar {
            display: inline-block;
            padding: 0 16px;
            font-size: 14px;
            color: #333;
            white-space: nowrap;
            width: 100%;
          }
          .nav-bar:hover {
            background-color: rgba(48, 117, 238, 0.05);
          }
        }
      }
    }
    // 用户模块
    .user-box {
      display: flex;
      align-items: center;
      color: #fff;
      font-size: 14px;
      .no-login {
        a {
          display: inline-block;
          margin: 0 10px;
          cursor: pointer;
          color: #fff;
        }
        .login {
          line-height: 48px;
        }
        .regist {
          height: 32px;
          padding: 5px 25px;
          background-color: #3e5173;
          border-radius: 18px;
        }
        .regist:hover {
          background-color: #3075ef;
        }
      }
      .login-box {
        // 登录之后的状态
        display: flex;
        position: relative;
        .nav-bar {
          color: #a8afbc;
          display: inline-block;
          padding: 0 15px;
          cursor: pointer;
          display: flex;
          align-items: center;
        }
        i {
          margin: 0px;
        }
        .nav-box {
          a {
            p {
              line-height: 40px;
              padding: 0 15px;
            }
          }
        }

        .nav-bar:hover i {
          transform: rotate(180deg);
          transition: all 0.3s;
        }
      }
      .other-wrap {
        display: flex;
        align-items: center;
        padding-left: 30px;
      }
      .icon-list {
        position: relative;
        height: 65px;
        display: flex;
        align-items: center;

        i {
          cursor: pointer;
        }
        .nav-box {
          position: absolute;
          border-radius: 5px;
          overflow: hidden;
          background-color: #fff;
          top: 55px;
          right: 12px;
          height: 0;
          transition: all 0.3s;
          overflow: hidden;
          z-index: 2019;
          p {
            padding: 5px 15px 5px 5px;
            color: #666;
            font-size: 14px;
            white-space: nowrap;
            cursor: pointer;
          }
          p:hover {
            background-color: rgba(48, 117, 238, 0.05);
          }
          .icon {
            margin: 0 10px;
          }
        }
      }
      .icon-list:hover .nav-box {
        height: auto;
      }
      .iconfont {
        font-size: 20px;
        color: #9aa8b7;

        margin: 0 10px;
      }
    }
  }
}
</style>
